<script setup lang="ts">
import { ref } from 'vue'

const obj = ref<{
  userInfo?: {
    username: string
  }
}>({})

// 可选链操作符JS，它是js用法，在vue2的js中可用，但html中不可用
// 用法: 对象.属性?.属性
// 对象.属性的值如果是unll或者undefined  它就返回undefined,
// 对象.属性的值如果非unll或者undefined  它就返回对象.属性.属性 ,
setTimeout(() => {
  obj.value.userInfo = { username: '张三' }
}, 5000)

const btnClick = () => {
  // if (obj.value.userInfo) {
  // obj.value.userInfo === null || obj.value.userInfo === undefined
  //   ? undefined
  //   : obj.value.userInfo.username
  console.log(obj.value.userInfo?.username)
  // }
}
</script>

<template>
  <button @click="btnClick">使用userInfo</button>
  <div class="app-page" v-if="obj.userInfo">
    <!-- <div>{{ obj.userInfo?.username }}</div> -->
    <div>{{ obj.userInfo.username }}</div>
  </div>
</template>

<style lang="scss" scoped></style>
